<template>
	<div>
		<!--模态框 -->
		<div>
			<save id="save-modal" :category="category"></save>
		</div>

		<!-- 列表数据 -->
		<div class="row">
			<!-- 一级分类 -->
			<div class="col-sm-5">
				<p>
					<button class="btn btn-white btn-default btn-round" @click="all()">
						<i class="ace-icon fa fa-refresh"></i>刷新
					</button>
					&nbsp;
					<button class="btn btn-white btn-default btn-round" @click="add(true)">
						<i class="ace-icon glyphicon glyphicon-plus"></i>新增
					</button>
				</p>
				<div class="table-header" style="text-align: center;">一级分类</div>
				<table id="simple-table" class="table  table-bordered table-hover">
					<thead>
						<tr>
							<th>分类名称</th>
							<th>排序</th>
							<th>操作</th>
						</tr>
					</thead>
			
					<tbody>
						<tr v-for="item in categorys" @click="clickLevel1(item)" :key="item.id" :class="{'btn-info': item.id == activeCategory.id}">
							<td>{{item.name}}</td>
							<td>{{item.sort}}</td>
							<td><operation :category="item"/></td>									
						</tr>
					</tbody>
				</table>				
			</div>
			
			<!-- 二级分类 -->
			<div class="col-sm-7">
				<p style="text-align: right;">
					<button class="btn btn-white btn-default btn-round" @click="add(false)">
						<i class="ace-icon glyphicon glyphicon-plus"></i>新增
					</button>
				</p>
				<div class="table-header" style="text-align: center;">二级分类</div>
				<table id="simple-table" class="table  table-bordered table-hover">
					<thead>
						<tr>
							<th>分类名称</th>
							<th>父类名称</th>
							<th>排序</th>
							<th>操作</th>
						</tr>
					</thead>
			
					<tbody>
						<tr v-for="item in activeCategory.childrenList" :key="item.id">
							<td>{{item.name}}</td>
							<td>{{activeCategory.name}}</td>
							<td>{{item.sort}}</td>
							<td><operation :category="item"/></td>									
						</tr>
					</tbody>
				</table>				
			</div>			
		</div>


	</div>
</template>

<script>
	import operation from '@/views/category/components/operation'
	import save from '@/views/category/components/save'
	import pagination from '@/views/components/pagination'
	export default {
		name: 'category',
		data() {
			return {
				categorys: [],
				category: {},
				activeCategory: {},
				isAdd1: true
			}
		},
		components: {
			operation,
			pagination,
			save
		},
		mounted() {
			this.all()
		},
		methods: {
			clickLevel1(category) {
				this.activeCategory = category
			},
			all() {
				let url = process.env.VUE_APP_SERVER + 'business/admin/category/all'
				this.$axios.post(url)
					.then(res => {
						console.log('category-all')
						this.categorys = res.data.data
						// 数据刷新后，记住之前选中的数据
						if(this.$global.tool.isEmpty(this.activeCategory))
							this.activeCategory = this.categorys[0]
							
						this.categorys.forEach((item) => {
							if(item.id === this.activeCategory.id) this.activeCategory = item
						})
					})
			},
			/**
			 * @param {Object} isAdd1 是否增加一级分类（or二级分类）
			 * 
			 */
			add(isAdd1) {
				this.isAdd1 = isAdd1
				this.category = {}
				if(!isAdd1)	this.category.parentId = this.activeCategory.id
				$('#save-modal').modal('show')
			}
		}
	}
</script>

<style scoped>

</style>
